<template>
  <div>
    <div id="mars3dcontent"></div>
    <div class="Tool">
      <span>管网模型加载</span>
      <el-radio-group v-model="radio1" @change="addModel">
        <el-radio value="1" size="large">ture</el-radio>
        <el-radio value="2" size="large">false</el-radio>
      </el-radio-group>
      <span>透明度调节</span>
      <div class="slider-demo-block">
        <span class="demonstration">地球透明度</span>
        <el-slider v-model="globevalue" />
      </div>
      <div class="slider-demo-block">
        <span class="demonstration">模型透明度</span>
        <el-slider v-model="modelvalue" />
      </div>
    </div>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { onMounted, onUnmounted, reactive } from "vue";
import { mapOptions, layers } from "@/utils/mapOptions";
import { destroyMap, flytoView } from "@/utils/Lmap";

let map;

const radio1 = ref("2");
let modeladded = false;
let globevalue = ref(0);
let modelvalue = ref(0);

let tileLayer = new mars3d.layer.ArcGisLayer({
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  enablePickFeatures: false,
  // queryParameters: {
  //   mosaicRule: `{"where":"t='20180525'"}`,
  // },
});

let tile3dList = [];
layers.gwModel.layers.forEach((el) => {
  tile3dList.push(new mars3d.layer.TilesetLayer(el));
});

onMounted(() => {
  map = new mars3d.Map("mars3dcontent");
  flytoView(map, mapOptions.scene.center);
  map.addLayer(tileLayer);
  // 添加深度检测
  map.setSceneOptions({
    globe: {
      depthTestAgainstTerrain: true,
    },
  });
  // 地形加载
  map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({
    url: layers.terrain.url,
  });
});

onUnmounted(() => {
  destroyMap(map);
});

function addModel() {
  if (radio1.value == "1") {
    if (!modeladded) {
      tile3dList.forEach((el) => {
        map.addLayer(el);
      });
      modeladded = true;
    } else {
      tile3dList.forEach((el) => {
        el.show = true;
      });
    }
  } else {
    tile3dList.forEach((el) => {
      el.show = false;
    });
  }
}
</script>
<style scoped>
.Tool {
  position: fixed;
  top: 100px;
  right: 80px;
  width: 160px;
  height: 150px;
  background-color: antiquewhite;
  overflow: scroll;
  scrollbar-width: 1px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  /* align-items: center; */
  flex-direction: column;
}
</style>
